<template>
  <view class="evaluate">
    <view class="page-container">
      <view class="title flex flex-middle flex-between">
        用户评价（63）
        <text> 好评率 100% </text>
      </view>

      <!-- 骨架屏 -->
      <u-skeleton rows="3" title loading avatar v-if="load" />
      <block v-else>
        <view
          class="item"
          v-for="(item, index) in [1, 1, 1, 1, 1]"
          :key="index"
        >
          <view class="user-info">
            <image src="@/static/image/common/test.png" mode="aspectFill" />

            <view class="right">
              <view class="name flex flex-middle flex-between">
                匿名用户
                <text>2025-04-12</text>
              </view>
              <view class="more flex flex-middle flex-left">
                9.0分
                <text> 中式推拿·SPA新人体验套餐A </text>
              </view>
            </view>
          </view>

          <view class="content">
            熟练掌握多种按摩手法，专业、舒适、高效的按摩服务，让每一位客户都能享受到身心的放松与愉悦。
          </view>
        </view>
      </block>

      <view class="safe-bottom">
        <u-loadmore class="load-more" :status="status" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    load: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    status() {
      return this.load ? "loading" : "nomore";
    },
  },
};
</script>

<style scoped lang="scss">
.evaluate {
  border-top: 10px solid #f6f6f6;
  padding: 0 16px;

  .item {
    border-top: 1px solid #f6f6f6;
    padding: 14px 0;

    .content {
      font-size: 12px;
      color: #333;
      margin-top: 14px;
    }

    .user-info {
      overflow: hidden;
    }

    .right {
      padding-left: 50px;

      .more {
        color: #fa6400;

        text {
          font-size: 12px;
          color: #9d9d9d;
          margin-left: 16px;
        }
      }

      .name {
        color: #222;
        font-size: 16px;

        text {
          font-size: 12px;
          color: #9d9d9d;
        }
      }
    }

    image {
      float: left;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .load-more {
    margin: 0 !important;
    padding: 16px 0;
  }

  .title {
    height: 44px;
    color: #222;

    text {
      color: #20b800;
      font-size: 12px;
    }
  }
}
</style>